<template>
    <div>
        <van-nav-bar :title="clubData.club_name" fixed left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight">
        <van-icon size="20px" :name="fav" slot="right" />
        </van-nav-bar>
        <div class="content">
            <ClubDetailCard :data="clubData"></ClubDetailCard>
            <template v-if="typeof(clubData.Clubvideo)==='array'">
                <video :src="'/uploads/clubvideo/video/'+ clubData.Clubvideo"></video>
            </template>
            <template v-else>
                <div class="video">
                    oops, 视频不见了
                </div>
            </template>
            <div class="text">
                <p>简介:</p>
                <p v-html="clubData.introduction"></p>
                <p>装备建议:</p>
                <p v-html="clubData.equipsuggest"></p>
            </div>
            <div class="comment">
                <p>评论：</p>
                <template v-if="typeof(clubData.Clubcomment)==='array'">
                    <div v-for="item in clubData.Clubcomment" :key="item.id">
                        <li>
                            {{ item }}
                        </li>
                    </div>
                </template>
                <template v-else>
                    <p>oops! 还没有评论</p>
                </template>
            </div>
            <div class="course" v-for="item in clubData.Clubcourse" :key="item.id">
                    <p>{{item.course_name}}</p>
                    <p>￥ {{item.course_price}}</p>
                    <p>课程介绍: {{item.introduction}}</p>
                    <p>注意事项: {{item.notice}}</p>
                    <p>开始日期: {{item.start_date}}</p>
                    <p>结束日期: {{item.end_date}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import ClubDetailCard from '@/components/ClubDetailCard.vue'
export default {
  name: 'clubdetail',
  data () {
    return {
      clubData: {},
      fav: 'like-o'
    }
  },
  mounted () {
    this.$axios.get('/api/get/mod/club/related/1', {
      params: {
        id: this.$route.query.id
      }
    }).then((result) => {
      this.clubData = result.data
    //   console.log('this.clubData :', this.clubData)
    })
    this.checkFan()
  },
  components: {
    ClubDetailCard
  },
  methods: {
    onClickLeft () {
      this.$root.$router.go(-1)
    },
    onClickRight () {
      if (this.fav === 'like-o') {
        // console.log('session :', sessionStorage.sessionid)
        // console.log('sessionuser :', sessionStorage.userid)
        this.$axios.get('/api/create', {
          params: {
            SessionID: sessionStorage.sessionid,
            mod: 'clubfans',
            club_id: this.clubData.id,
            user_id: sessionStorage.userid,
            fans_type: 1
          }
        }).then((result) => {
          console.log('result :', result)
          this.fav = 'like'
          // this.checkFan()
        }).catch((err) => {
          console.log('err :', err)
        })
      } else {
        this.$axios.get('/api/delete', {
          params: {
            SessionID: sessionStorage.sessionid,
            mod: 'clubfans',
            club_id: this.clubData.id,
            user_id: sessionStorage.userid,
            fans_type: 1
          }
        }).then((result) => {
          console.log('result :', result)
          this.fav = 'like-o'
        }).catch((err) => {
          console.log('err :', err)
        })
      }
    },
    checkFan () {
      console.log('this.clubData.id :', this.clubData.id)
      this.$axios.get('/api/isExits/mod/fans', {
        params: {
          fan_id: this.clubData.id,
          userid: sessionStorage.userid,
          fans_type: 1,
          SessionID: sessionStorage.sessionid
        }
      }).then(Response => {
        console.log('Respone :', Response)
        if (Response.data === 0) {
          this.fav = 'like'
        } else {
          this.fav = 'like-o'
        }
      })
    }
  }
}
</script>
<style scoped>
.van-nav-bar{
    border-bottom: 1px solid #ddd;
}
.content{
    margin-top: 47px;
    padding: 1rem;
}
.video{
    height: 8rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text{
    border: 1px solid rgb(223, 221, 221);
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 10px;
    background-color: rgba(223, 221, 221, 0.329);
}
.text>p:nth-of-type(2){
    text-indent: 2em;
    font-size: 0.9rem;
}
.text>p:last-of-type{
    text-indent: 2em;
    font-size: 0.9rem;
}
.comment{
    border-bottom: 1px solid #ddd;
}
.comment li{
    list-style: none;
}
.course{
    margin-top: 10px;
    border: 1px solid rgb(199, 199, 199);
    border-radius: 5px;
    padding: 0.5rem;
}
.course>p:first-of-type{
    font-size: 1.1rem;
    font-weight: 600;
    width: 49%;
}
.course>p:nth-of-type(2){
    margin: 0;
    padding: 0;
    width: 49%;
    color: red;
}
</style>
